import { Tabs } from 'antd'
import React, { useEffect, useState } from 'react'
import './index.less'

/**
 * 扩展的Tabs组件，提供右键菜单以关闭特定的tab
 * @param {Object} props - 传递给Tabs组件的属性
 */
export default function TabsExt(props) {

    // 控制右键菜单的显示状态
    const [menuDisplay, setMenuDisplay] = useState(false)
    // 保存右键菜单的位置
    const [menuPosition, setMenuPosition] = useState({left: 0, top: 0})
    // 保存当前选中的tab的key
    const [currentTabKey, setCurrentTabKey] = useState(null)

    /**
     * 隐藏右键菜单
     */
    function hideMenu() {
        setMenuDisplay(false)
    }

    /**
     * 关闭所有可以关闭的tab
     */
    function closeAllTabs() {
        const { items } = props
        const closeKeys = []
        for (let i = 0; i < items.length; i++) {
            if (items[i].closable === false) {
                continue
            }
            closeKeys.push(items[i].key)
        }
        props.tabExtClose(closeKeys)
        hideMenu()
    }

    /**
     * 关闭当前选中的tab
     */
    function closeCurrentTab() {
        const { items } = props
        for (let i = 0; i < items.length; i++) {
            if (items[i].key === currentTabKey) {
                if (items[i].closable !== false) {
                    props.tabExtClose(currentTabKey)
                }
                break
            }
        }
        hideMenu()
    }

    /**
     * 关闭当前选中tab左侧的所有可关闭tab
     */
    function closeLeftTabs() {
        const { items } = props
        const closeKeys = []
        for (let i = 0; i < items.length; i++) {
            if (items[i].key === currentTabKey) {
                break
            }
            if (items[i].closable === false) {
                continue
            }
            closeKeys.push(items[i].key)
        }
        props.tabExtClose(closeKeys)
        hideMenu()
    }

    /**
     * 关闭当前选中tab右侧的所有可关闭tab
     */
    function closeRightTabs() {
        const { items } = props
        const closeKeys = []
        for (let i = items.length - 1; i >= 0; i--) {
            if (items[i].key === currentTabKey) {
                break
            }
            if (items[i].closable === false) {
                continue
            }
            closeKeys.push(items[i].key)
        }
        props.tabExtClose(closeKeys)
        hideMenu()
    }

    // 初始化时为tab列表添加右键菜单事件
    useEffect(() => {
        function handleClickMenu(event) {
            event.preventDefault()
            setMenuDisplay(true)
            setMenuPosition({
                left: event.clientX,
                top: event.clientY
            })
            const idSplitArr = event.target.id.split('-')
            const key = idSplitArr[idSplitArr.length - 1]
            setCurrentTabKey(key)
        }

        const tabs = document.getElementsByClassName('ant-tabs-nav-list')[0];
        tabs.addEventListener('contextmenu', handleClickMenu)
        return () => {
            tabs.removeEventListener('contextmenu', handleClickMenu)
        }
    }, [])

    // 渲染组件
    return (
        <>
            <div onClick={hideMenu}>
                <Tabs {...props} /> 
            </div>
            {
                menuDisplay && (
                    <div className='custom-menu'
                        style={menuPosition}
                    >
                        <ul>
                            <li onClick={closeAllTabs}>关闭全部页签</li>
                            <li onClick={closeCurrentTab}>关闭当前页签</li>
                            <li onClick={closeLeftTabs}>关闭左侧页签</li>
                            <li onClick={closeRightTabs}>关闭右侧页签</li>
                        </ul>
                    </div>
                )
            }
        </>
    )
}